<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Example</title>
</head>

<body>
<p id="msg"></p>
<p>
    <button id="settime">Set Time</button>
    <button id="cleartime">Clear Time</button>
    <button id="setinterval">Set Interval</button>
    <button id="clearinterval">Clear Interval</button>
</p>

<script type="text/javascript">
    var buttons = document.getElementsByTagName('button');
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].onclick = handleButtonPress;
    }

    var timeID;
    var intervalID;
    var count = 0;

    function handleButtonPress(e) {
        if (e.target.id == "settime") {
            timeID = window.setTimeout(function () {
                displayMsg("Timeout Expired");
            }, 5000);
            displayMsg("Timeout Set");
        } else if (e.target.id == "cleartime") {
            window.clearTimeout(timeID);
            displayMsg("Timeout Cleared");
        } else if (e.target.id == "setinterval") {
            intervalID = window.setInterval(function () {
                displayMsg("Inertval expired. Counter: " + count++);
            }, 2000);
        } else if (e.target.id == "clearinterval") {
            window.clearInterval(intervalID);
            displayMsg("Interval　Cleared");
        }
    }

    function displayMsg(msg) {
        document.getElementById('msg').innerHTML = msg;
    }
</script>
</body>

</html>
